<template>
  <ul class="footer-bar">
    <li class="footer-bar-item" v-for="item in links" :key="item.path">
      <router-link :key="item.path" :to="item.path">
        <span class="iconfont" :class="item.icon"></span>
        <span>{{ item.text }}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['links'],
}
</script>

<style lang="scss" scoped>
.footer-bar {
  height: 100%;
  display: flex;
  .footer-bar-item {
    flex: 1;
    a {
      height: 100%;
      display: flex;
      flex-direction: column;
      &.router-link-exact-active {
        color: red;
      }
    }
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
    span:nth-child(1) {
      flex: 6;
      font-size: 20px;
    }
    span:nth-child(1) {
      flex: 4;
    }
  }
}
</style>
